$(() => {
	let month = $("#month>.box"),
		day = $("#day>.box"),
		dow = $("#day-of-week>.box"),
		hour = $("#hour>.box"),
		minute = $("#minute>.box"),
		second = $("#second>.box")
	$('#app').show()
	month.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/12)*360}deg) translate(80px)`,
			transition: "1s transform"
		})
	})

	day.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/31)*360}deg) translate(180px)`,
			transition: "1s transform"
		})
	})


	dow.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/7)*360}deg) translate(240px)`,
			transition: "1s transform"
		})
	})

	hour.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/24)*360}deg) translate(300px)`,
			transition: "1s transform"
		})
	})

	minute.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/60)*360}deg) translate(380px)`,
			transition: "1s transform"
		})
	})

	second.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/60)*360}deg) translate(450px)`,
			transition: "1s transform"
		})
	})
	let now = new Date()
		let d_year = now.getFullYear(),
			d_month = now.getMonth(),
			d_day = now.getDate(),
			d_dow = now.getDay(),
			d_hour = now.getHours(),
			d_minute = now.getMinutes(),
			d_second = now.getSeconds()
	let t=setInterval(() => {
		let month = $("#month>.box"),
			day = $("#day>.box"),
			dow = $("#day-of-week>.box"),
			hour = $("#hour>.box"),
			minute = $("#minute>.box"),
			second = $("#second>.box")
			year = $('#year')
		
			d_second++
			if(d_second%60==0){
				d_minute++
				if(d_minute%60==0){
					d_hour++
					if(d_hour%24==0){
						d_day++
						d_dow++
					}
				}
			}
			
			year.text(d_year+"年")
			month.css({
				transform:`rotate(${(d_month/12*360)%360*-1}deg)`,
				transition:`1s transform`
			})
			
			day.css({
				transform:`rotate(${((d_day-1)/31*360)%360*-1}deg)`,
				transition:`1s transform`
			})
			
			dow.css({
				transform:`rotate(${(d_dow/7*360)%360*-1}deg)`,
				transition:`1s transform`
			})
			
			hour.css({
				transform:`rotate(${(d_hour/24*360)%360*-1}deg)`,
				transition:`1s transform`
			})
			
			minute.css({
				transform:`rotate(${(d_minute/60*360)%360*-1}deg)`,
				transition:`1s transform`
			})
			
			second.css({
				transform:`rotate(${d_second/60*-360}deg)`,
				transition:`1s transform`
			})
	}, 1000)
})
